<!--
 * @Author: coocase
 * @Date: 2021-03-22 15:01:37
 * @LastEditTime: 2021-05-13 13:29:37
 * @LastEditors: coocase
 * @Description: 
 * @FilePath: \git\dami\src\pages\index\floor.vue
-->
<template>
    <div class="floor-wrap">
        <Row>
            <Col span="18">
                <Card
                    v-for="floor of floorData"
                    :key="floor.floorId"
                    class="floor"
                    :bordered="false"
                >
                    <p slot="title">
                        <span class="floor-title">{{ floor.floorId }}F</span>
                        <span>{{ floor.floorName }}</span>
                    </p>
                    <div class="item-wrap">
                        <Row>
                            <Col span="8" class="item-big">
                                <Card   class="floor-item-big" 
                                        :dis-hover="true"
                                        @click.native="$toDetail(floor.floorItem[0].itemName)"
                                >
                                    <div
                                        class="item-img"
                                        :style="{
                                            'background-color':
                                                floor.floorItem[0].imgUrl,
                                        }"
                                    ></div>
                                    <div class="item-info">
                                        <p class="item-itemName">
                                            {{ floor.floorItem[0].itemName }}
                                        </p>
                                        <p class="item-price">
                                            票价： ￥{{
                                                floor.floorItem[0].minPrice
                                            }}
                                        </p>
                                    </div>
                                </Card>
                            </Col>
                            <Col span="16" class="items">
                                <Card
                                    v-for="item of floorfilter(floor.floorItem)"
                                    :key="item.id"
                                    :class="floorCount(item.id)"
                                    :dis-hover="true"
                                    @click.native="$toDetail(item.itemName)"
                                >
                                    <div
                                        class="item-img"
                                        :style="
                                            floorCount(item.id)
                                                ? {
                                                      'background-color':
                                                          item.imgUrl,
                                                  }
                                                : ''
                                        "
                                    ></div>
                                    <div class="item-info">
                                        <p class="item-date">
                                            {{ item.itemDate }}
                                        </p>
                                        <p class="item-itemName">
                                            {{ item.itemName }}
                                        </p>
                                        <p class="item-price">
                                            票价： ￥{{ item.minPrice }}
                                        </p>
                                    </div>
                                </Card>
                            </Col>
                        </Row>
                    </div>
                </Card>
            </Col>
            <Col span="6">
                <Card
                    v-for="list of hotList"
                    :key="list.hotId"
                    :bordered="false"
                    class="hot-list"
                >
                    <p slot="title">热门{{ list.hotName }}</p>
                    <span href="#" slot="extra">更多>></span>

                    <p
                        v-for="item of list.ListData"
                        :key="item.listId"
                        class="list-info"
                        :class="hotcount(item.listId) < 4 ? 'top' : ''"
                        @click="goDetail()"
                    >
                        <span
                            class="list-id"
                            :class="hotcount(item.listId) < 4 ? 'hot' : 'other'"
                            >{{ hotcount(item.listId) }}</span
                        >
                        <span class="list-name">{{ item.listName }}</span>
                    </p>
                </Card>
            </Col>
        </Row>
    </div>
</template>

<script>
export default {
    name: "Floor",
    data() {
        return {
            floorData: this.floorData,
            hotList: this.hotList,
        };
    },
    methods: {
        getfloor: function () {
            this.$http
                .getRequest({
                    api: "floor",
                    data: {},
                })
                .then((res) => {
                    this.floorData = res.floor;
                    //   console.log(res)
                    //   console.log(res);
                })
                .catch((err) => {
                    console.log(err);
                });
        },
        getHot: function () {
            this.$http
                .getRequest({
                    api: "Hot",
                    data: {},
                })
                .then((res) => {
                    this.hotList = res.hotList;

                    //   console.log(res);
                })
                .catch((err) => {
                    console.log(err);
                });
        },
        goDetail:function () {  
            this.$toDetail();
        }
    },
    computed: {
        //控制floorItem样式
        //计算结果作为
        floorCount() {
            return function (id) {
                return id % 5 == 1 ? "floor-item-big" : "floor-item";
            };
        },
        floorfilter() {
            return function (items) {
                return items.slice(1);
            };
        },
        hotcount() {
            return function (id) {
                return id % 12 || 12;
            };
        },
    },
    mounted: function () {
        this.getfloor();
        this.getHot();
    },
};
</script>

<style scoped>
.floor-wrap {
    position: relative;
}
.floor {
    margin-bottom: 30px;
}
.floor-title {
    color: red;
    font-size: 18px;
}
.item-wrap {
    display: flex;
    justify-content: space-between;
    align-content: center;
    flex-wrap: wrap;
}
.item-wrap .ivu-card {
    border: none;
}
.ivu-card-body {
    padding: 0;
}
.floor-item:hover,
.floor-item-big:hover {
    cursor: pointer;
}
.floor-item-big .ivu-card-body {
    padding: 0px !important;
}
.floor-item-big .item-img {
    width: 250px;
    height: 350px;
}
.floor-item-big .item-info {
    position: absolute;
    bottom: 16px;
    width: 250px;
    background-color: rgba(255, 0, 0, 0.445);
    color: #fff;
}
.floor-item .item-img {
    display: inline-block;
    width: 100px;
    height: 150px;
    border: none;
}
.floor-item .item-info {
    display: inline-block;
}
.floor-item .item-itemName,
.item-price,
.item-date {
    width: 120px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin: 10px;
    font-size: 12px;
}
.item-wrap .ivu-card {
    display: inline-block;
}

.hot-list {
    height: 501px;
    /* background-color: rgb(214, 143, 91); */
}
.list-info {
    padding: 5px 30px 5px 10px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.list-info:hover{
    cursor: pointer;
}
.hot {
    background-color: red;
    color: #fff;
}
.other {
    background-color: grey;
}
.list-id {
    padding: 0 5px;
}
</style>